<template>
	<view>
		<view class="wrap">
			<view class="list-item" style="margin: 20upx 20upx 0;">
				<view class="title-wrap">

					<text class="title-name">
						客户基本信息
					</text>

				</view>

				<u-line color="#efefef" dashed margin="0 0 10px"></u-line>

				<view class="text-line">
					<text class="text-name">客户类型</text>
					<text class="text-value">{{customDetail.customerType == 1 ? '企业':'个人'}}</text>
				</view>

				<view class="text-line" v-if="customDetail.customerType == 1">
					<text class="text-name">企业名称</text>
					<text class="text-value">{{customDetail.customerName|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">客户姓名</text>
					<text
						class="text-value">{{(customDetail.customerType == 1 ? customDetail.contactPerson:customDetail.customerName)|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">联系电话</text>
					<text class="text-value">{{customDetail.contactMobile|filterNull}}</text>
				</view>


				<view class="text-line">
					<text class="text-name">所属业务员</text>
					<text class="text-value">{{customDetail.businessPersonName|filterNull}}</text>
				</view>


				<view class="title-wrap" style="justify-content: flex-end;" v-if="customDetail.contactMobile">

					<view class="btn" @click="callPhone(item)" v-if="false">
						发短信
					</view>

					<view class="btn" style="margin: 0 30upx;" @click="callPhone">
						拨打电话
					</view>

				</view>

			</view>

			<view style="background-color: #f5f5f5;">

				<u-tabs-swiper :list="tabs" ref="tabs" bgColor="#f5f5f5" :showBar="false" :bold="false"
					:current="current" keyName="name" :is-scroll="false" @change="change" activeColor="#20C3AA"
					inactiveColor="#606266">
				</u-tabs-swiper>

			</view>

			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">

				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(0)">
						<view class="page-box" v-if="true">
							<view class="list-item">

								<view style="display: flex;margin: 30upx 20upx 10upx;">
									<image :src="customDetail.idCardImg|mmvImageUrl" mode="scaleToFill"
										style="width: auto;height: 180upx;flex-grow: 1;"
										@click="preImage(customDetail.idCardImg)"></image>
									<image :src="customDetail.idCardImgBack|mmvImageUrl" mode="scaleToFill"
										style="width: auto;height: 180upx;flex-grow: 1;margin-left: 30upx;"
										@click="preImage(customDetail.idCardImgBack)"></image>
								</view>

								<view v-if="customDetail.customerType == 1"
									style="display: flex;margin: 20upx 20upx 10upx;">
									<image :src="customDetail.licenseImg|mmvImageUrl" mode="scaleToFill"
										style="width: auto;height: 180upx;flex-grow: 1;"
										@click="preImage(customDetail.licenseImg)"></image>

									<text style="flex-grow: 1;margin-left: 30upx;"></text>
								</view>

							</view>

						</view>

						<u-empty v-else></u-empty>
					</scroll-view>

				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(0)">
						<view class="page-box" v-if="true">
							<view class="list-item">

								<view v-if="banklist.length>0">
									<view
										style="display: flex;justify-content: space-between;margin: 20upx 20upx 20upx 30upx;align-items: center;">
										<text
											style="color: #20C3AA;font-size: 28upx;border-radius: 8upx;border: 2upx solid #20C3AA;padding: 0 10upx;"
											@click="goBind">添加银行卡</text>

										<text v-if="banklist.length>0"
											style="align-self: flex-end;font-size: 28upx;color: #333;">绑定总数:{{banklist.length}}张</text>

									</view>

									<view style="display: flex;flex-direction: column;"
										v-for="(bitem, bindex) in banklist" :key="bindex">

										<view class="text-line">
											<text class="text-name">银行名称</text>
											<text class="text-value">{{bitem.bankDeposit|filterNull}}</text>
										</view>

										<view class="text-line">
											<text class="text-name">银行卡号</text>
											<text class="text-value">{{bitem.bankCardNo|filterNull}}</text>
										</view>

										<view class="text-line">
											<text class="text-name">银行预留手机号</text>
											<text class="text-value">{{bitem.mobileNo|filterNull}}</text>
										</view>

										<view class="text-line">
											<text class="text-name">绑定时间</text>
											<text class="text-value">{{bitem.createTime|filterNull}}</text>
										</view>

										<view style="display: flex;margin: 10upx 20upx;">
											<image :src="bitem.cardImgFront|mmvImageUrl" mode="scaleToFill"
												style="width: auto;height: 180upx;flex-grow: 1;"
												@click="preImage(bitem.cardImgFront)">
											</image>
											<image :src="bitem.cardImgBack|mmvImageUrl" mode="scaleToFill"
												style="width: auto;height: 180upx;flex-grow: 1;margin-left: 30upx;"
												@click="preImage(bitem.cardImgBack)"></image>
										</view>

										<view class="title-wrap" style="justify-content: flex-end;">

											<view class="btn" v-if="false">
												查看账单
											</view>

											<view class="btn" @click="unbind(bitem.id)" style="margin: 0 30upx;">
												解除绑定
											</view>

										</view>

										<u-line color="#efefef" dashed margin="10px 0"></u-line>

									</view>

									<u-loadmore :status="loadStatus[0]" @loadmore="reachBottom(0)"></u-loadmore>
								</view>

								<u-empty v-else></u-empty>

							</view>

						</view>
					</scroll-view>

				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(1)">
						<view class="page-box">

							<view style="display: flex;flex-direction: column;" v-if="orderList.length>0">

								<Cardqianyue v-for="(oitem, oindex) in orderList" :key="oindex" :item="oitem">
								</Cardqianyue>
								
								<u-loadmore :status="loadStatus[1]" @loadmore="reachBottom(1)"></u-loadmore>
							</view>

							<view class="list-item" v-else>
								<u-empty></u-empty>
							</view>

						</view>
					</scroll-view>

				</swiper-item>


				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(2)">
						<view class="page-box">


							<view style="display: flex;flex-direction: column;" v-if="billList.length>0">

								<Cardkoukuan v-for="(billitem, billindex) in billList" :key="billindex" :item="billitem">
								</Cardkoukuan>
								
								<u-loadmore :status="loadStatus[2]" @loadmore="reachBottom(2)"></u-loadmore>
							</view>


							<view class="list-item" v-else>
								<u-empty></u-empty>
							</view>


						</view>
					</scroll-view>

				</swiper-item>

			</swiper>

		</view>

		<u-modal title="提示" content="" :show="showUnbind" showCancelButton closeOnClickOverlay @confirm="confirm"
			@cancel="cancel" @close="close">

			<view style="text-align: center;font-size: 32upx;color: #A7A7A7;">确定解绑银行卡吗？解绑之后需要重新签约</view>
		</u-modal>

	</view>
</template>

<script>
	import {
		customerInfo,
		bankCardPage,
		customerUnbindCard,
		signOrderList,
		signOrderBillPage
	} from '@/api/custom-api.js';

	import {
		mmvImageUrl
	} from '@/utils/index.js';

	import Cardqianyue from '@/components/mmv-ui/card-qianyue.vue'
	import Cardkoukuan from '@/components/mmv-ui/card-koukuan.vue'

	export default {
		components: {
			Cardqianyue,
			Cardkoukuan,
		},
		data() {
			return {
				tabs: [{
						name: '证件信息'
					},
					{
						name: '银行卡信息'
					},
					{
						name: '订单信息'
					},
					{
						name: '扣款信息'
					},

				],
				current: 0,
				swiperCurrent: 0,
				dx: 0,
				banklist: [],
				orderList: [],
				billList: [],
				loadStatus: ['loadmore', 'loadmore', 'loadmore'],
				showUnbind: false,
				customerId: '',
				unbindid: '',
				bankPageNo: 1,
				orderPageNo: 1,
				billPageNo: 1,
				customDetail: {
					// customerId: "客户id",
					// customerType: "1",
					// customerName: "我是个公司",
					// contactPerson: "我是公司联系人",
					// contactMobile: "",
					// idCardImg: "https://cdn.uviewui.com/uview/album/1.jpg",
					// idCardImgBack: "https://cdn.uviewui.com/uview/album/2.jpg",
					// idCardExpirydate: "身份证失效日期",
					// idCardNo: "身份证号",
					// licenseImg: "https://cdn.uviewui.com/uview/album/3.jpg",
					// license: "营业执照号码",
					// businessPersonId: "业务员id",
					// businessPersonName: "业务员名称",
					// signOrderCount: "2",
					// bankCount: "666"
				}
			}
		},
		onLoad(op) {
			this.customerId = op.customerId;

		},

		onShow() {
			this.getData();

			this.bankPageNo = 1;
			this.getBankList();

			this.orderPageNo = 1;
			this.getOrderList();

			this.billPageNo = 1;
			this.getBillList();
		},

		methods: {
			getData() {
				customerInfo({
					customerId: this.customerId
				}).then(res => {
					this.customDetail = res.data;
				})
			},

			getBankList() {
				bankCardPage({
					customerId: this.customerId,
					page: this.bankPageNo
				}).then(res => {
					if (this.bankPageNo == 1) {
						this.banklist = [];
						this.bankPageNo++;

						this.loadStatus[0] = 'loadmore';
					} else {
						if (!uni.$u.test.isEmpty(res.data)) {
							this.bankPageNo++;

							this.loadStatus[0] = 'loadmore';
						} else {
							this.loadStatus[0] = 'nomore';
						}
					}

					this.banklist = this.banklist.concat(res.data);
				})
			},

			getOrderList() {
				signOrderList({
					customerId: this.customerId,
					params:{
						pageNo:this.orderPageNo,
						pageSize:10
					}
				}).then(res => {
					
					if (this.orderPageNo == 1) {
						this.orderList = [];
						this.orderPageNo++;
					
						this.loadStatus[1] = 'loadmore';
					} else {
						if (!uni.$u.test.isEmpty(res.data)) {
							this.orderPageNo++;
					
							this.loadStatus[1] = 'loadmore';
						} else {
							this.loadStatus[1] = 'nomore';
						}
					}
					
					this.orderList = this.orderList.concat(res.data);
					
				})
			},

			getBillList() {
				
				signOrderBillPage({
					customerId: this.customerId,
					pageNo: this.billPageNo,

				}).then(res => {
					
					if (this.billPageNo == 1) {
						this.billList = [];
						this.billPageNo++;
					
						this.loadStatus[2] = 'loadmore';
					} else {
						if (!uni.$u.test.isEmpty(res.data)) {
							this.billPageNo++;
					
							this.loadStatus[2] = 'loadmore';
						} else {
							this.loadStatus[2] = 'nomore';
						}
					}
					
					this.billList = this.billList.concat(res.data);

				})
			},

			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
			},

			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},

			animationfinish({
				detail: {
					current
				}
			}) {
				this.swiperCurrent = current;
				this.current = current;
			},

			preImage(url) {
				console.log('url', url);
				url = mmvImageUrl(url);
				uni.previewImage({
					urls: [url]
				})
			},

			goBind() {
				uni.navigateTo({
					url: '/pagesB/my-custom/addbank?customId='+ this.customerId
				})
			},

			callPhone() {
				if (!uni.$u.test.isEmpty(this.customDetail.contactMobile)) {
					uni.makePhoneCall({
						phoneNumber: this.customDetail.contactMobile,
						success: (res) => {
							console.log('拨打电话成功');
						}
					})
				}
			},

			unbind(id) {
				this.unbindid = id;
				this.showUnbind = true;
			},

			cancel() {
				this.showUnbind = false
			},
			close() {
				this.showUnbind = false
			},

			confirm() {
				this.showUnbind = false
				uni.showLoading({
					title: '解绑中'
				})

				customerUnbindCard({
					bankCarSignId: this.unbindid
				}).then(res => {
					uni.hideLoading();
					uni.$u.toast('解绑成功');

					this.bankPageNo = 1;
					this.getBankList();
				})
			},

			reachBottom(type) {
				this.loadStatus[type] = 'loading';

				switch (type) {
					case 0:
						this.getBankList();
						break;
					case 1:
						this.getOrderList();
						break;
					case 2:
						this.getBillList();
						break;
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.title-wrap {
		display: flex;
		margin-top: 10upx;
	}

	.title-name {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		font-size: 32upx;
		margin-left: 30upx;
		color: #333;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.list-item {
		margin-top: 0;
	}

	.btn {
		width: 180upx;
		height: 60upx;
		border-radius: 50upx;
		color: white;
		text-align: center;
		background-color: #20C3AA;
		font-size: 26upx;
		line-height: 60upx;
	}
</style>
